<template>
  <div class="page">
    <!-- <div class="page-top">头部</div> -->
    <!-- <transition mode="out-in">  -->
      <!-- <keep-alive> -->
        <component :is="middleName" class="page-middle"></component>
      <!-- </keep-alive> -->
    <!-- </transition>  -->
    <div class="page-bottom">
      <div class="bottm_btn" @click="change('Movie')" :class="{active:middleName == 'Movie'}">
        <img src="./images/01.png" v-if="middleName == 'Movie'" >
        <img src="./images/011.png" v-else>
        <p>电影</p>
      </div>
      <div class="bottm_btn" @click="change('Cinema')" :class="{active:middleName == 'Cinema'}">
        <img src="./images/02.png" alt="" v-if="middleName == 'Cinema'">
	    	<img src="./images/022.png" v-else>
        <p>影院</p>
      </div>
      <!-- <div class="bottm_btn" @click="change('About')" :class="{active:middleName == 'About'}">
        <img src="./images/03.png" alt="">
        <p>资讯</p>
      </div> -->
      <div class="bottm_btn">
          <router-link to="/mation">
            <img src="./images/03.png" alt="">
            <p class="txt">资讯</p>
          </router-link>
      </div>
      <div class="bottm_btn" @click="change('Login')" :class="{active:middleName == 'Login'}">
		    <img src="./images/04.png" v-if="middleName == 'Login'">
        <img src="./images/044.png" alt="" v-else>
        <p>我的</p>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive,toRefs,markRaw, watch, onMounted } from 'vue'
import { useStore } from 'vuex'

import Movie from '@/components/Movie'
import Cinema from '@/components/Cinema'
import Login from '@/components/Login'

export default {
  name: 'Home',
  components:{
    Movie:markRaw(Movie),
    Cinema:markRaw(Cinema),
    Login:markRaw(Login),
  },
  setup(){
    const state = reactive({
      middleName:'Movie'
    });

    const store = useStore();
	
	// 更换组件事件
	const change = (name)=>{
    state.middleName=name
    if (name == 'Movie') {
     store.commit('getIsShowBack', [false,'电影'])
    }else if(name == 'Cinema'){
     store.commit('getIsShowBack', [true,'影院'])
    }
	}

  //icon状态持久化,用sessionStorage存到本地
    watch(()=>state.middleName,()=>sessionStorage.setItem('user', JSON.stringify(state.middleName)))

  //页面数据初始化的时候用onMounted钩子到本地取
    onMounted(()=>{
      let user = JSON.parse(sessionStorage.getItem('user'))
      user ? state.middleName = user : []
    })

    return {
      ...toRefs(state),
	  change
    }
  }
}
</script>

<style lang="less" scoped>
html,body,.page{
  height: 100vh;
  overflow: hidden;
}
.page{
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  & .page-top{
    flex-shrink: 0;
  }
  & .page-middle{
    flex-grow: 1;
    overflow: auto;
  }
  & .page-bottom{
    border-top: 1px solid rgb(246, 246, 246);
    height: 49px;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    background: white;

    & .bottm_btn{
      user-select: none;
      padding-top: 8px;
     width: 25%;
     display: flex;
     flex-direction: column;
     align-items: center;
     font-size: 12px;
     & img{
       width: 21px;
     }
     .txt{
       color: black;
     }
    }
  }
}
//组件切换动画
.v-enter-active {
    opacity: 1;
   transition: all .1s ease;
 }
 .v-enter{
    transform: translateY(10px);
     opacity: 0.5;
 }
 .v-leave-active{
   transition: all 1s ease;
 }
 .v-leave-to{
   transform: translateY(40px);
   opacity: 0;
 }
 .page-middle{
     flex-grow: 1;
   overflow: auto;
 }

</style>
